<template>
<div>
    <a-form :layout="formLayout">
        <a-form-item label='计划名称' :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input placeholder='请输入计划名称' v-model='name' />
        </a-form-item>
        <a-form-item label='进度依据' :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input placeholder='请输入进度依据' v-model='totalText' />
        </a-form-item>
        <a-form-item label='总目标' :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number :min="1"  placeholder='请输入总目标' v-model="total"/>
        </a-form-item>
        <a-form-item :wrapperCol="saveWrapperCol">
            <a-button type='primary' @click="onAdd">保存</a-button>
        </a-form-item>
    </a-form>
</div>
</template>

<script lang="ts">
import {
    Component,
    Emit,
    Model,
    Prop,
    Vue,
    Watch
} from 'vue-property-decorator'
import axios from 'axios'
@Component
export default class AddStudyPlan extends Vue {
    name: string = '';
    total:number = 0;
    totalText:string = ''
    formLayout: string = 'horizontal'
    labelCol: object = {
        span: 4
    }
    wrapperCol: object = {
        span: 6
    }
    saveWrapperCol:object = {
        span:14
    }
    private onAdd(){
        axios.post('http://www.guotingyan.cn/api/study',{
            name:this.name,
            total:this.total,
            totalText:this.total+this.totalText,
            progress:0
        }).then((response:any)=>{
            if(response.status == 201){
                this.$message.success('创建计划成功！')
            }
        })
    }
  
}
</script>

<style lang="scss" scoped>
.container {
    font-size: 18px;
    height: 100px;
}
</style>
